<template>
    <div>
        <!-- 顶部导航 -->
        <van-nav-bar title="个人信息" left-text="返回" @click-left="onClickLeft" color="#999999"  class="leader"  left-arrow>
            <template #right >
               <van-icon name="ellipsis" size='26px' color='#333' class="pullTab" @click.stop="ShowHidden = !ShowHidden" />
               <Pulltab 
                    v-if="ShowHidden" 
                    @click.stop=""
               />
            </template>
        </van-nav-bar>
        <!-- 图片上传 -->
        <div class="hello">
            <span>头像</span>
            <div class="upload">
                <img v-if="url" :src="url" alt="">
                <div v-else>+</div>
                <van-uploader 
                    class="uploader"
                    :after-read="afterRead"
                    preview-image
                />
            </div>
            <!-- <van-button type="primary" @click="handleUpdate">保存</van-button> -->
        </div>
        <div class="cont">
            <div class="box">
                <p>昵称</p>
                <div class="right">
                    <span><input type="text" v-model="username" value="username"></span>
                    <van-icon name="arrow" size="20px" color="#999999"/>
                </div>
            </div>
        </div>
        <div class="cont">
            <div class="box">
                <p>性别</p>
                <div class="right">
                    <van-radio-group v-model="radio" direction="horizontal">
                        <van-radio name="1" icon-size="16px">男</van-radio>
                        <van-radio name="2" icon-size="16px" checked-color="#ee0a24">女</van-radio>
                    </van-radio-group>
                    <van-icon name="arrow" size="20px" color="#999999"/>
                </div>
            </div>
        </div>
        <div class="cont">
            <div class="box">
                <p>邮箱</p>
                <div class="right">
                    <span><input type="text" v-model="emil" value="emil"></span>
                    <van-icon name="arrow" size="20px" color="#999999"/>
                </div>
            </div>
        </div>
        <div class="cont">
            <div class="box">
                <p>手机号码</p>
                <div class="right">
                    <span><input type="text" v-model="phone" value="phone"></span>
                    <van-icon name="arrow" size="20px" color="#999999"/>
                </div>
            </div>
        </div>
        <div class="quit">
            <span @click="handleUpdate">保存</span>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import Pulltab from '../components/Pulltab.vue'
    import request from '@/utils/request'
    import {mapState} from 'vuex'
    import {userUpdate} from '@/api/user'
    export default {
        components: {
            Pulltab,
        },
        name: 'HelloWorld',
        data () {
            return {
                ShowHidden: false,
                imgStr: require('../assets/images/home/touxiang1.webp'),
                errorStr: '',
                radio:1,
                url:'',
                username:null,
                emil:'281***9730@qq.com',
                phone:null
            }
        },
        computed: { // 获取用户信息
            ...mapState({
                userInfo:state=>state.users.userInfo
            })
        },
        created () {
            this.username = this.userInfo.username
            this.emil = this.userInfo.emil
            this.phone = this.userInfo.phone
            let {avatar} = this.userInfo
            if(avatar){
                this.url = avatar
            }
        },
        methods: {
            onClickLeft() {
                this.$router.push("/personal")
            },
            onClickRight() {
            },
            afterRead(file) {
                // 此时可以自行将文件上传至服务器
                console.log(this.username,this.emil,this.phone,this.radio)
                console.log(file);
                let formData = new FormData() 
                formData.append('avatar', file.file) //将文件资源整理为表单对象格式
                console.log(formData)
                request.post('/node/users/upload', formData, {
                    headers: {
                        'enctype': 'multipart/form-data'
                    }
                }).then(res => {
                    console.log(res.data)
                    let {url} = res.data.data
                    this.url = `http://localhost:3004${url}`
                })
            },
            handleUpdate(){
                //获取用户_id
                let {_id} = this.userInfo
                userUpdate(_id,{avatar:this.url}).then(res=>{ //更新数据库用户信息
                    this.$store.commit('users/infoMut',{ //更新本地用户信息
                        ...this.userInfo,  //旧用户信息
                        avatar:this.url  //新增用户头像
                    })
                })
            }
        }
    }
</script>

<style src="../assets/css/userinfo.css" scoped></style>
<style lang="less" scoped>
::v-deep .van-nav-bar__left i{
    color:#444;
    font-size: 20px;
}
::v-deep .van-nav-bar__left span,::v-deep .van-nav-bar__title{
    color: #444;
    font-size: 16px;
}
.upload{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #00D2C3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 30px;
    img{
        width: 100%;
        height: 100%;
    }
    .uploader{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
    }
}
input{
    text-align: right;
}
</style>
